import React from 'react'
// 配置路由规则
import { Routes, Route, Navigate } from 'react-router-dom';
//01: Routes相当于Switch, 保证每次只匹配一个路由
//02: Navigate为一个路由@6包中的一个内置组件, 该组件特点:就是只要在页面中显示, 就会执行该组件的
// to 属性, 就会直接跳转到to 属性对应的路由页面
// 注意: Navigate组件会自动执行跳转
//03: router@6默认是忽略了路由的path 的大小写的,如果需要设置严格匹配, 设置caseSensitive 属性
//04:
import Home from '../views/router5-view/Home';
import Category from '../views/router5-view/Category'
import Car from '../views/router5-view/Car'
import Mine from '../views/router5-view/Mine'
import Detail from '../views/router5-view/Detail'
type Props = {}

export default function Index({ }: Props) {
    return (
        <Routes>
            {/* router@5语法 */}
            {/* <Route path='/home' component={ Home}></Route> */}
            {/* router@6语法 */}
            <Route path='/home' element={<Home />}></Route>
            <Route path='/category' caseSensitive element={<Category />}></Route>
            <Route path='/car/*' element={<Car />}></Route>
            <Route path='/mine' element={<Mine />}></Route>
            <Route path='/detail' element={<Detail />}></Route>
            {/* 路由重定向 */}
            <Route path='/' element={<Navigate to='/home'></Navigate>}></Route>
        </Routes>
    )
}